<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>创建表单</span></div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="表单状态">
          <el-switch v-model="form.status"/>
        </el-form-item>
        <el-form-item label="表单名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="表单设置" prop="goods_name">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-card shadow="never">
                <ul class="item-select">
                  <li v-for="(item, index) in typeList" :key="index" @click="addItem(item.value)">{{ item.label }}</li>
                </ul>
              </el-card>
            </el-col>
            <el-col :span="17">
              <el-card shadow="never">
                <el-alert :closable="false" title="注：按住可拖动栏目顺序" type="info"/>
                <ul class="item">
                  <draggable :list="form.formData">
                    <li v-for="(item,index) in form.formData" :key="index">
                      <el-card>
                        <div class="title">
                          <div>
                            <b>栏目 #{{ item.id }}</b>
                            <el-tag v-if="item.type==='SingleInput'" effect="dark">单行文本</el-tag>
                            <el-tag v-if="item.type==='TextareaInput'" effect="dark">多行文本</el-tag>
                            <el-tag v-if="item.type==='Radio'" type="danger" effect="dark">单选</el-tag>
                            <el-tag v-if="item.type==='CheckBox'" type="danger" effect="dark">多选</el-tag>
                            <el-tag v-if="item.type==='DatePicker'" type="warning" effect="dark">日期选择</el-tag>
                            <el-tag v-if="item.type==='TimePicker'" type="warning" effect="dark">时间选择</el-tag>
                            <el-tag v-if="item.type==='SelectAddress'" type="warning" effect="dark">地点选择</el-tag>
                            <el-tag v-if="item.type==='UploadPicture'" type="info" effect="dark">图片上传</el-tag>
                            <el-tag v-if="item.type==='UploadVoice'" type="info" effect="dark">语音上传</el-tag>
                            <el-tag v-if="item.type==='UploadFile'" type="info" effect="dark">附件上传</el-tag>
                            <el-tag v-if="item.parentId" type="info">关联栏目：#{{ item.parentId }} 关联选项：#{{ item.parentOptionId }}</el-tag>
                          </div>
                          <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteItem(index)"/>
                        </div>
                        <el-form label-width="100px">
                          <el-form-item label="是否必填：">
                            <el-radio v-model="item.isMust" label="1">是</el-radio>
                            <el-radio v-model="item.isMust" label="0">否</el-radio>
                          </el-form-item>
                          <el-form-item v-if="item.type==='Radio'" label="导出统计：">
                            <el-radio v-model="item.statistics" label="1">是</el-radio>
                            <el-radio v-model="item.statistics" label="0">否</el-radio>
                          </el-form-item>
                          <el-form-item label="栏目标题：">
                            <el-input v-model="item.name" placeholder="请填写栏目内容"/>
                          </el-form-item>
                          <el-form-item label="解释说明：">
                            <el-input v-model="item.explain" placeholder="栏目内容说明，可不填"/>
                          </el-form-item>
                          <slot v-if="item.type==='Radio'||item.type==='CheckBox'">
                            <el-form-item v-for="(subItem, subIndex) in item.options" :key="subIndex" :label="`选项 #${subItem.id}：`">
                              <el-input v-model="item.options[subIndex].value" style="width: 60%;"/>
                              <el-tag v-if="subItem.sonIds.length>0" type="info">关联 #{{ subItem.sonIds }}
                                <el-dropdown trigger="click" @command="command=>{subItem.sonIds.push(id);addItem(command, item.id, subItem.id)}">
                                  <el-button type="warning" icon="el-icon-plus" circle size="mini" style="zoom: .6"/>
                                  <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(typeItem, typeIdx) in typeList" :key="typeIdx" :command="typeItem.value">{{ typeItem.label }}</el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                              </el-tag>
                              <el-dropdown v-if="subItem.sonIds.length===0" trigger="click" @command="command=>{subItem.sonIds.push(id);addItem(command, item.id, subItem.id)}">
                                <el-button type="primary">添加关联项</el-button>
                                <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item v-for="(typeItem, typeIdx) in typeList" :key="typeIdx" :command="typeItem.value">{{ typeItem.label }}</el-dropdown-item>
                                </el-dropdown-menu>
                              </el-dropdown>
                              <el-button circle icon="el-icon-minus" size="mini" type="primary" @click="deleteSubItem(index, subIndex)"/>
                            </el-form-item>
                            <el-form-item>
                              <el-button @click="addSubItem(index)">添加选项</el-button>
                            </el-form-item>
                          </slot>
                          <slot v-if="item.type==='UploadFile'">
                            <el-form-item label="附件数量：">
                              <el-input-number v-model="item.uploadCount" :min="1" :max="9" size="small"/>
                            </el-form-item>
                          </slot>
                          <slot v-if="item.type==='UploadPicture'">
                            <el-form-item label="图片数量：">
                              <el-input-number v-model="item.uploadCount" :min="1" :max="9" size="small"/>
                            </el-form-item>
                            <el-form-item label="图片类型：">
                              <el-radio v-model="item.uploadPicType" label="1">普通图片</el-radio>
                            </el-form-item>
                          </slot>
                        </el-form>
                      </el-card>
                    </li>
                  </draggable>
                </ul>
              </el-card>
            </el-col>
          </el-row>
        </el-form-item>
        <div style="text-align:center">
          <el-button :disabled="!submitStatus" type="primary" style="width: 120px;" @click="submitForm('form')">保 存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  },
  data() {
    return {
      // 栏目集合
      typeList: [{
        label: '单行文本',
        value: 'SingleInput'
      }, {
        label: '多行文本',
        value: 'TextareaInput'
      }, {
        label: '单选栏',
        value: 'Radio'
      }, {
        label: '多选栏',
        value: 'CheckBox'
      }, {
        label: '日期选择',
        value: 'DatePicker'
      }, {
        label: '时间选择',
        value: 'TimePicker'
      }, {
        label: '地点选择',
        value: 'SelectAddress'
      }, {
        label: '图片上传',
        value: 'UploadPicture'
      }, {
        label: '语音上传',
        value: 'UploadVoice'
      }, {
        label: '附件上传',
        value: 'UploadFile'
      }],
      id: 1,
      optionId: 1,
      submitStatus: true,
      form: {
        name: '',
        formData: [],
        status: true
      }
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    addItem(type, parentId, parentOptionId) {
      this.form.formData.push({
        id: this.id++,
        parentId: parentId || null,
        parentOptionId: parentOptionId || null,
        type: type,
        name: '',
        explain: '',
        options: [],
        uploadPicType: '1',
        uploadCount: 1,
        isMust: '1',
        statistics: '0',
        display: !parentId
    });
      console.log(this.form.formData)
    },
    deleteItem(index) {
      if (this.form.formData[index].parentId) {
        for (let i = 0; i < this.form.formData.length; i++) {
          if (this.form.formData[i].id === this.form.formData[index].parentId) {
            for (let j = 0; j < this.form.formData[i].options.length; j++) {
              if (this.form.formData[i].options[j].id === this.form.formData[index].parentOptionId) {
                for (let k = 0; k < this.form.formData[i].options[j].sonIds.length; k++) {
                  if (this.form.formData[i].options[j].sonIds[k] === this.form.formData[index].id) {
                    this.form.formData[i].options[j].sonIds.splice(k, 1);
                    break;
                  }
                }
              }
            }
          }
        }
      }
      const id = this.form.formData[index].id;
      if (this.form.formData[index].type === 'Radio' && this.form.formData[index].options.length > 0) {
        for (let i = 0; i < this.form.formData[index].options.length; i++) {
          for (let j = 0; j < this.form.formData[index].options[i].sonIds.length; j++) {
            for (let k = 0; k < this.form.formData.length; k++) {
              if (this.form.formData[k].id === this.form.formData[index].options[i].sonIds[j]) {
                this.form.formData.splice(k, 1);
                break;
              }
            }
          }
        }
      }
      for (let i = 0; i < this.form.formData.length; i++) {
        if (this.form.formData[i].id === id) {
          this.form.formData.splice(i, 1);
          break;
        }
      }
    },

    addSubItem(index) {
      this.form.formData[index].options.push({id: this.optionId++, value: '', sonIds: []});
    },
    deleteSubItem(index, subIndex) {
      if (this.form.formData[index].type === 'Radio' && this.form.formData[index].options[subIndex].sonId && this.form.formData[index].options[subIndex].sonId.length > 0) {
        for (let i = 0; i < this.form.formData[index].options[subIndex].sonId.length; i++) {
          for (let j = 0; j < this.form.formData.length; j++) {
            if (this.form.formData[j].id === this.form.formData[index].options[subIndex].sonId[i]) {
              this.form.formData.splice(j, 1);
              break;
            }
          }
        }
      }
      this.form.formData[index].options.splice(subIndex, 1);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.name === '' || this.form.name === null) {
            this.$message.error('请输入表单名称');
            return;
          }
          if (this.form.formData.length === 0) {
            this.$message.error('请设置表单内容');
            return;
          }
          for (let i = 0; i < this.form.formData.length; i++){
            if (this.form.formData[i].name === '' || this.form.formData[i].name === null){
              this.$message.error('表单设置内有项目未填写名字，请填写或删除');
              return;
            }
            if (this.form.formData[i].type === 'Radio' || this.form.formData[i].type === 'CheckBox'){
              if (this.form.formData[i].options.length === 0){
                this.$message.error('表单设置内单选或多选项目存在选项为空的项目，请填写或删除');
                return;
              }
              for (let j = 0; j < this.form.formData[i].options.length; j++) {
                if (this.form.formData[i].options[j] === '' || this.form.formData[i].options[j] === null) {
                  this.$message.error('表单设置内单选或多选项目存在选项为空的项目，请填写或删除');
                  return;
                }
              }
            }
          }
          this.submitStatus = false;
          const data = Object.assign({}, this.form);
          data.formData = JSON.stringify(data.formData);
          data.status = data.status ? 1 : 0;
          data.itemId = this.id;
          data.optionId = this.optionId;
          const url = 'form/create';
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this.$router.back(-1);
          }).catch((e) => {
            this.$message.error(e.msg);
          })
        } else {
          this.submitStatus = true;
          this.$message.error('提交失败,请检查必填项');
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  width: 1200px;
  margin: 0 auto;
  .el-form {
    max-width: 1100px;
    .item-select {
      margin: 0;
      >li{
        cursor: pointer;
      }
    }
    .item {
      min-height: 344px;
      max-height: 600px;
      overflow: auto;
      list-style:none;
      margin: 0;
      padding: 0;
      padding-right: 20px;
      li{
        margin: 15px 10px;
        .title{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
        }
        .el-form-item{
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
